<template>
  <div class="sq-right-bottom d-flex-c">
    <div class="panel-header-bg flex-between">
      <div class="title-text">
        站网情况
      </div>
    </div>
    <div
      class="panel-zone-big-bg right-top flex-between fixed-height-box"
    >
      <div
        class="panel-zone-bg flex-1 m-r-mini full-height "
      >
        <div class="flex-between ai-c m-b-tiny">
          <div class="little-title flex-between full-width">
            运维状态
            <el-date-picker
              class="blue-select blue-date-picker"
              popper-class="blue-select-dropdown"
              v-model="month"
              type="month"
              size="mini"
              prefix-icon=""
              :picker-options="pickerOptions"
              :clearable="false"
              placeholder="选择年月"
            />
          </div>
        </div>
        <div class="d-flex-c flex-1">
          <div class="overflow-hidden full-width position-relative flex-1">
            <BKChart
              :option="operationPieOptions"
            />
            <div class="absolute-center d-flex-c">
              <div>
                <span
                  class="f-24 ff-agencyyr f-w7 c-text-blue"
                  style="margin-right: 2px;"
                > {{ operationPieTotal }}</span>
                <span class="f-12">次</span>
              </div>
              <div class="f-14">
                总数
              </div>
            </div>
          </div>
          <PieChartLegend
            class="flex-0 full-width"
            :value-data="operationStateInfo"
            :legends="operationPieConfig"
            @select="showReverseCheck"
            extend-class="m-l-mini flex-1"
          />
        </div>
      </div>
      <EquRunningStatus />
    </div>
    <DetailModal
      v-if="detailVisible"
      :visible="detailVisible"
      :columns="columns"
      :static-data="detailData"
      @close="detailVisible=false"
      width="836px"
    />
  </div>
</template>

<script>
import { getRingOption } from '@/components/chart/echart-utils'
import PieChartLegend from '@/views/business/ysqjcdp/components/pie-chart-legend.vue'
import DetailModal from '@/views/business/ysqjcdp/components/modal/detail-modal.vue'
import EquRunningStatus from '../../components/business/equ-running-status.vue'
export default {
  name: 'SqRightBottom',
  components: { PieChartLegend, EquRunningStatus, DetailModal },
  data () {
    this.operationPieConfig = [
      { name: '正常', color: '#3DFF9A', field: 'normal', unit: '次' },
      // { name: '告警', color: '#FEBE13', field: 'gj', unit: '次' },
      { name: '异常', color: '#FF5851', field: 'abnormal', unit: '次' }
    ]
    this.pickerOptions = {
      disabledDate (time) {
        return time.getTime() > Date.now()
      }
    }
    return {
      operationPieOptions: null, // 运维状态饼图
      month: this.$utils.createDate(new Date()).format('YYYY-MM'),
      operationStateInfo: {},
      operationStateData: null,
      detailVisible: false,
      columns: [
        { title: '测站名称', field: 'stnm', minWidth: 120 },
        { title: '站码', field: 'stcd', width: 120 },
        { title: '行政区划', field: 'addnvm', width: 130 },
        { title: '设备名', field: 'checkSbName', width: 120 },
        { title: '设备码', field: 'checkSbStcd', width: 120 },
        { title: '维修次数', field: 'mtnum', width: 140 }],
      detailData: []
    }
  },
  computed: {
    operationPieTotal () {
      const total = this.operationPieConfig.reduce((pre, cur) => {
        return pre + this.operationStateInfo[cur.field] || 0
      }, 0)
      return total
    }
  },
  watch: {
    month: {
      immediate: true,
      handler () {
        this.setOperationPieOptions()
      }
    }
  },
  methods: {
    async setOperationPieOptions () {
      const data = await this.$request.formDataPost(
        window.outApiSwpn + 'swpm-mainten/mainten/api-server/mainten/record',
        {
          startTime: this.$utils.createDate(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.$utils.createDate(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
        }, false)
      this.operationStateData = data
      this.operationStateInfo = {
        normal: data.filter(item => item.sbStatus === 1).length,
        abnormal: data.filter(item => item.sbStatus === 2).length
      }
      const result = getRingOption({
        color: this.operationPieConfig.map(item => item.color),
        data: this.operationPieConfig.map(item => {
          return {
            name: item.name,
            value: this.operationStateInfo[item.field] ?? 0
          }
        })
      })
      result.series[0].radius = ['90%', '89%']
      result.series[1].radius = ['80%', '78%']
      result.series[2].radius = ['76%', '78%']
      this.operationPieOptions = result
    },
    showReverseCheck (field) {
      this.detailVisible = true
      this.detailData = this.operationStateData.filter(item => {
        const status = field === 'normal' ? 1 : 2
        return item.sbStatus === status
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-height-box {
  height: 260px;
}

::v-deep.station-progress {
  margin-bottom: 12px;

  .progress-title {
    line-height: 16px;
    margin-bottom: 9px;
  }

  .el-progress .el-progress-bar__outer {
    background-color: #224972;
  }
}

</style>
